<template>
  <v-container fluid>
    <v-flex xs12>
      <v-alert color="success" icon="check_circle" value="" v-model="alert">
        创建成功
      </v-alert>
      <v-card class="grey lighten-4 elevation-0">
        <v-card-title>
          {{title}}
          <v-spacer></v-spacer>
          <!--<v-text-field append-icon="search" label="Search" single-line hide-details v-model="search"></v-text-field>-->
          <v-btn floating small class="grey" @click.native="cancel()">
            <v-icon light>cancel</v-icon>
          </v-btn>
          &nbsp;
          <v-btn floating small class="purple" @click.native="save()">
            <v-icon light>save</v-icon>
          </v-btn>
        </v-card-title>
        <v-card-text>
          <v-container fluid>
            <v-layout row wrap>
              <v-flex md4 xs12>
                <v-text-field name="name" label="品名" hint="Product name is required" value="Input text" v-model="product.name" class="input-group--focused" required></v-text-field>
              </v-flex>
              <v-flex md4 xs12>
                <v-text-field name="model" label="型号" hint="Product name is required" value="Input text" v-model="product.model" class="input-group--focused" required></v-text-field>
              </v-flex>
              <v-flex md4 xs12>
                <v-text-field name="brand" label="品牌" hint="Product name is required" value="Input text" v-model="product.brand" class="input-group--focused"></v-text-field>
              </v-flex>
              <v-flex md4 xs12>
                <!--<v-text-field name="category" label="Email" value="Input text" v-model="product.unitInStock" class="input-group--focused" required></v-text-field>-->
                 <v-select required v-bind:items="categoryList" label="类别" v-model="product.category"></v-select>
                  <v-btn floating small class="green" @click.native.stop="dialog = !dialog">
                    <v-icon light>add</v-icon>
                  </v-btn>新增分类
              </v-flex>
              <v-flex md4 xs12>
                <v-text-field name="remark" label="备注" hint="Price is required" value="Input text" v-model="product.remark" class="input-group--focused"></v-text-field>
              </v-flex>
               <!--<v-flex md4 xs12>
                  <v-switch label="Product Status" v-model="product.isActive" dark></v-switch>
              </v-flex>-->
            </v-layout>
          </v-container>
        </v-card-text>
      </v-card>
    </v-flex>
    <v-dialog v-model="dialog">
      <v-card>
        <v-card-title>
          新增分类
        </v-card-title>
        <v-card-text>
          <v-flex md4 xs12>
            <v-text-field name="name" label="分类名" hint="名字不可为空" value="" v-model="category.name" class="input-group--focused"></v-text-field>
          </v-flex>
          <v-btn
            color="blue-grey"
            @click.native="saveCategory()"
            class="dark--text"
          >
            创建
            <v-icon right dark>cloud_upload</v-icon>
          </v-btn>
        </v-card-text>
      </v-card>
    </v-dialog>
  </v-container>
</template>
<script>
export default {
  data: function () {
    return {
      dialog: false,
      alert: false,
      errors: [],
      title: '',
      product: {
        category: '',
        name: '',
        model: '',
        brand: '',
        remark: ''
      },
      category: {
        name: ''
      },
      categoryList: []
    }
  },
  computed: {
    newProduct: function () {
      return 'New Product'
    }
  },
  methods: {
    save: function () {
      let product = this.product
      console.log('product is', product)

      if (!product.id) {
        this.api.postData('product', product).then((res) => {
          this.$router.push({name: 'Products'})
        }, (err) => {
          console.log(err)
        })
      } else {
        this.api.putData('product/' + product.id.toString(), product).then((res) => {
          this.$router.push({name: 'Products'})
        }, (err) => {
          console.log(err)
        })
      }
    },
    selectCategory (item) {
      this.product.category = item.text
    },
    saveCategory: function () {
      let category = this.category
      this.api.postData('category', category).then((res) => {
        this.dialog = false
        this.alert = true
        this.$router.push({name: 'NewProduct'})
      }, (err) => {
        console.log(err)
      })
    },
    getById: function () {
      this.api.getData('product/' + this.$route.params.id + '?_expand=category').then((res) => {
        this.product = res.data[0]
         // this.product.category.categoryName = this.product.category.firstName + ' ' + this.product.category.lastName
      }, (err) => {
        console.log(err)
      })
    },
    getCategorys: function () {
      this.api.getData('categories').then((res) => {
        this.categorys = res.data
        this.categorys.forEach((c) => {
          let category = c.name
          this.categoryList.push(category)
        })
        console.log(this.categoryList)
      }, (err) => {
        console.log(err)
      })
    },
    cancel: function () {
      this.$router.push({name: 'Products'})
    }
  },
  mounted: function () {
    this.getCategorys()
    if (this.$route.params.id) {
      this.getById()
      this.title = '编辑产品'
    } else this.title = '新建商品'
  }
}
</script>
